<template>
  <div class="column">
    <PanelItem title="柱状图-靓号占有信息">
      <template #chartContent>
        <div class="chart" ref="studyPanelRef"/>
      </template>
    </PanelItem>
    <PanelItem title="饼状图-靓号数统计">
      <template #chartContent>
        <div class="chart" ref="prettyCountRef"></div>
      </template>
    </PanelItem>
  </div>
</template>

<script setup lang="ts">
import PanelItem from '../PanelItem/PanelItem.vue'
import {onMounted, Ref, ref} from "vue";
import {initPrettyCountPanel, initStudyPanel} from './config'
import useVisualStore from "@/store/visualizationModule";

const studyPanelRef = ref<HTMLElement>()

const prettyCountRef = ref<HTMLElement>()
onMounted(async () => {
  // 获取数据
  const visualStore = useVisualStore()
  await visualStore.requestPrettyOccupyAction()

  initStudyPanel(studyPanelRef as Ref<HTMLElement>)

  await visualStore.requestPrettyCountAction()
  initPrettyCountPanel(prettyCountRef as Ref<HTMLElement>)
})
</script>

<style scoped lang="less">
.chart {
  height: 3.5rem;
}
</style>
